$(function () {
    (function () {
        $.ajax({
            url: "data/dest-menu-content.json",
            dataTyle: "json",
            type: "get",
            success: function (e) {
                $.each(e, function (i, obj) {
                    var div = $('<div class="clearFloat"></div>');
                    var data = obj.data;
                    $.each(data, function (ii, oo) {
                        var oDiv = $('<div class="hot"></div>');


                        oDiv.append(`
                        <h3>
                            <a href="${ oo.title[1]}" title="${ oo.title[0]}" >${oo.title[0]}</a>
                        </h3>
                        `);
                        var list = $('<div class="list clearFloat"></div>')
                        if (oo.region == "no") {
                            var oData = oo.data;
                            $.each(oData, function (iii, ooo) {
                                if (ooo.special == "i") {
                                   list.append(`
                                <a href="${ ooo.url}" style="color:#E3376D" title="${ ooo.name }">${ooo.name}</a>
                                `); 
                                } else  if (ooo.special == "y"){
                                    list.append(`
                                <a href="${ ooo.url}"  title="${ ooo.name }">${ooo.name}</a>
                                `); 
                                }
                            })

                        } else if (oo.region == "yes") {
                            var yesData = oo.data;
                            $.each(yesData, function (region, json) {
                                var ddiv = $(`<div class="clearFloat"></div>`);
                                list.append(`
                                <div class="region">
                                    <span>${region}</span>
                                </div>
                                `);
                                $.each(json, function (vv, dd) {
                                    ddiv.append(`
                                    <a href="${ dd.url}"  title="${ dd.name }">${dd.name}</a>
                                    `)
                                })
                                list.append(ddiv);
                            })
                        }
                        oDiv.append(list);

                        div.append(oDiv);

                    });
                    div.append(`
                        <a href="javascript:;" class="img">
                            <img src="${ obj.imgUrl}" alt="">
                        </a>
                        `);
                    $(".TabControl").append(div);
                    
                });





                // 滑入功能
                // 初始样式
                var iii = null;
                tab(0);
                function tab(index) { 
                    $("body>header>.slideshow>.dest-menu>.TabControl>div").eq(index).show().siblings().hide();
                    $("body>header>.slideshow>.dest-menu>ul>li").eq(index).find(".ac").css({ "display": "block" }).parent().siblings().find(".ac").css({ "display": "none" });
                };
                $("body>header>.slideshow>.dest-menu>.TabControl>div").hide();
                $("body>header>.slideshow>.dest-menu>ul>li>span").hide();
                $("body>header>.slideshow>.dest-menu>ul>li").mousemove(
                    function () { 
                        iii = $(this).index();
                        $("body>header>.slideshow>.dest-menu>.TabControl").css({ "display": "block" });
                        var index = $(this).index();
                        tab(index);
                    })
                $("body>header>.slideshow>.dest-menu>ul>li").mouseout(function () {
                    $("body>header>.slideshow>.dest-menu>.TabControl").css({ "display": "none" });
                    
                    var index = $(this).index();
                    tab(index);
                    $("body>header>.slideshow>.dest-menu>.TabControl>div").hide();
                    $("body>header>.slideshow>.dest-menu>ul>li>span").hide();
                });
                $("body>header>.slideshow>.dest-menu>.TabControl").mousemove(function () {
                    $(this).css({ "display": "block" });
                    tab(iii);
                });
                $("body>header>.slideshow>.dest-menu>.TabControl").mouseout(function () {
                    $(this).css({ "display": "none" });
                    $("body>header>.slideshow>.dest-menu>ul>li>span").hide();
                })






                
            }
        })
    })();
})